<template>
  <div class="win">
    <form @submit="submit" v-if="formList">
      <div class="container">
        <div class="module" v-for="(item,index) in formList" :key="index">
          <div class="list" v-for="(ite,inde) in item.list" :key="inde">
            <p class="label">{{ite.label}}</p>
            <div class="int_row">
              <div class="int">
                <input
                  :type="ite.type"
                  :name="inde"
                  :maxlength="ite.maxlength"
                  placeholder-style="color:#999"
                  :placeholder="'请填写'+ite.label"
                  @input="intChange(inde,$event)"
                />
              </div>
            </div>
          </div>
          <div class="list" v-if="index==0">
            <p class="label">门店所在地区</p>
            <div class="int_row">
              <div class="int">
                <picker mode="region" class="input" :name="inde" @change="addressChange">
                  <div class="bank" v-if="addressRegion.length==0">
                    <p>请选择地址</p>
                  </div>
                  <div v-else>{{addressRegionStr}}</div>
                </picker>
              </div>
            </div>
          </div>
          <div class="list" v-if="index==1">
            <p class="label">请选择经营项目</p>
            <div class="manage_box">
              <div class="manage" @click="manageChoose(k,it)" v-for="(it, k) in manage" :key="k">
                <img v-if="it.status==true" :src="bjurl+'apply_green_logo.png'" />
                <img v-else :src="bjurl+'apply_grey_logo.png'" />
                {{it.name}}
              </div>
            </div>
          </div>
          <div class="list" v-if="index==2">
            <p class="label">短信验证码</p>
            <div class="int_row yzm">
              <div class="int">
                <input
                  type="number"
                  maxlength="6"
                  v-model="yzmNumber"
                  placeholder-style="color:#999"
                  placeholder="请输入短信验证码"
                />
              </div>
              <button class="grey" v-if="yzmShow!=true">{{countdown+'s倒计时'}}</button>
              <button class="green" v-else @click="getYzm">获取验证码</button>
            </div>
          </div>
        </div>
        <!-- 上传图片 -->
        <div class="module">
          <p class="label">请上传门店门头照片</p>
          <div class="photo_row">
            <img v-if="photo_row==''" @click="choicePhoto" :src="bjurl+'store_head_img.png'" />
            <img v-else @click="choicePhoto" :src="photo_row" />
          </div>
        </div>
        <button :disabled="disabled" class="fot_btn" form-type="submit">提交审核</button>
        <div class="bottom_row">
          <p class="center">提交审核，后台将于24小时内与您取得联系,</p>
          <p class="center">进行人工核对信息，请注意接听来电！</p>
        </div>
      </div>
    </form>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: false,
      bjurl: "",
      manage: [],
      manageList: [],
      phoneMax: 11, //手机号最大
      type: 0, //填写的表单类型
      formList: [], //表单项
      phone: "",
      countdown: 60,
      yzmShow: true, //验证码按钮显示
      yzmNumber: "", //验证码
      timeClear: null,
      province: "", //省
      city: "", //市
      area: "", //区
      addressRegion: [], //省市区
      addressRegionStr: "", //省市区
      photo_row: "",
      photoImg: ""
    };
  },
  methods: {
    // 请求接口申请合作门店
    getTeamWorkStore(formData) {
      this.imgBase64(imgBaseData => {
        this.$ajax("/home/GetInfo/teamWorkStore", "post", {
          province: this.province,
          city: this.city,
          area: this.area,
          address: formData.address,
          store_name: formData.store_name,
          store_area: formData.store_area,
          phone: formData.phone,
          code: this.yzmNumber,
          station_num: formData.station_num,
          image: imgBaseData,
          item: this.manageList
        })
          .then(res => {
            
            if (res.status) {
              this.disabled = true;
              this.$toast({
                content: "提交成功~"
              });
              setTimeout(() => {
                wx.switchTab({
                  url: "../index/main"
                });
              }, 1200);
            } else {
              this.$toast({
                content: res.msg
              });
            }
          })
          .catch(err => {});
      });
    },
    // 请求接口经营项目
    getManage() {
      this.$ajax("/home/GetInfo/manageItem", "post", {})
        .then(res => {
          if (res.status) {
            if (res.data == 0) return;
            let manage = [];
            res.data.forEach(el => {
              manage.push({
                name: el,
                status: false
              });
            });
            this.manage = manage;
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 遍历经营项目
    getManageList() {
      let j = 0;
      for (let i in this.manage) {
        if (this.manage[i].status == true) {
          for (;;) {
            this.manageList[j] = i;
            j++;
            break;
          }
        }
      }
    },
    // 省市区选择
    addressChange(e) {
      let value = e.mp.detail.value;
      if (value[0] == "全部")
        return this.$toast({
          content: "请选择地址"
        });
      this.addressRegion = value;
      this.addressRegionStr = this.addressRegion.join("").replace(/全部/g, "");
      this.province = value[0];
      this.city = value[1];
      this.area = value[2];
    },
    //经营项目选择
    manageChoose(k, it) {
      if (it.status == true) {
        it.status = false;
      } else it.status = true;
    },
    // 上传图片
    choicePhoto() {
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //原图或压缩图都可以
        sourceType: ["album", "camera"], //拍照或相册都可以
        success: res => {
          this.photo_row = res.tempFilePaths[0];
        }
      });
    },
    // 因为不支持v-module 监听输入
    intChange(inde, e) {
      if (inde == "phone") {
        this.phone = e.mp.detail.value;
      }
    },
    // 验证手机号
    isPhone(phone) {
      return !(!/^(1[3-9])\d{9}$/.test(phone) || phone == "");
    },
    // 点击获取验证码
    getYzm() {
      if (this.isPhone(this.phone)) {
        this.$ajax("/home/GetInfo/getSmsCode", "post", {
          phone: this.phone
        })
          .then(res => {
            
            if (res.status) {
              this.$toast({
                content: "已发送验证码"
              });
              this.timeDown();
            } else {
              this.$toast({
                content: res.msg
              });
            }
          })
          .catch(err => {});
      } else
        this.$toast({
          content: "请输入有效的手机号"
        });
    },
    //验证码60S倒计时
    timeDown() {
      this.yzmShow = false;
      this.timeClear = setInterval(() => {
        if (this.countdown === 0) {
          this.countdown = 60;
          clearInterval(this.timeClear);
          this.timeClear = null;
          this.yzmShow = true;
        } else {
          this.countdown--;
          // 发送请求获得验证码
        }
      }, 1000);
    },
    // 图片转base64格式
    imgBase64(callback) {
      let fileSystemManager = wx.getFileSystemManager();
      fileSystemManager.readFile({
        filePath: this.photo_row, //选择图片返回的相对路径
        encoding: "base64", //编码格式
        success: res => {
          let src = "data:image/png;base64," + res.data;
          callback(src);
        }
      });
    },
    // 提交表单
    submit(e) {
      let formObj = {};
      let formData = e.mp.detail.value;
      //得到form的所有属性
      this.formList.forEach(el => {
        for (let k in el.list) {
          formObj[k] = el.list[k];
        }
      });
      // 校验门店所在地
      if (this.addressRegionStr == "") {
        return this.$toast({
          content: "请选择门店所在地区"
        });
      }
      // 通用验证
      for (let k in formData) {
        if (formData[k] == "")
          return this.$toast({
            content: "请输入" + formObj[k].label
          });
      }
      // 校验经营项目
      for (let p in this.manage) {
        if (this.manage[p].status == true) {
          this.getManageList();
          break;
        } else if (p == 7) {
          return this.$toast({
            content: "请选择经营项目"
          });
        }
      }
      // 手机号校验
      if (!this.isPhone(this.phone))
        return this.$toast({
          content: "请输入有效手机号码"
        });
      // 验证码校验
      if (this.yzmNumber.length !== 6) {
        return this.$toast({
          content: "请输入有效验证码"
        });
      }
      // 供货商图片校验
      if (this.photo_row == "")
        return this.$toast({
          content: "请上传资质图片"
        });

      this.getTeamWorkStore(formData);
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    clearInterval(this.timeClear);
    this.formList = formList;
    this.getManage();
    this.$navColor({
      title: "招募"
    });
  }
};
let formList = [
  {
    list: {
      store_name: {
        label: "门店名称",
        mustFill: true,
        data: "",
        maxlength: "20",
        type: "text"
      }
      // {
      //   label: "门店所在地区",
      //   mustFill: true,
      //   data: "",
      //   maxlength: "11",
      //   type: "text"
      // },
    }
  },
  {
    list: {
      address: {
        label: "门店详细地址及门牌号",
        mustFill: true,
        data: "",
        maxlength: "40",
        type: "text"
      },
      store_area: {
        label: "门店面积",
        mustFill: true,
        data: "",
        maxlength: "10",
        type: "number"
      }
    }
  },
  {
    list: {
      station_num: {
        label: "工位数量",
        mustFill: true,
        data: "",
        maxlength: "6",
        type: "number"
      },
      phone: {
        label: "手机号",
        mustFill: true,
        data: "",
        maxlength: "11",
        type: "number"
      }
    }
  }
];
</script>

<style lang="scss" scoped>
.win {
  .container {
    margin: 20rpx;
    width: 710rpx;
    .module {
      margin-top: 60rpx;
      .label {
        margin-left: 60rpx;
        font-size: 32rpx;
        color: #4d4d4d;
      }
      .photo_row {
        margin-top: 40rpx;
        overflow: hidden;
        padding: 0 12rpx;
        img {
          margin: 0 auto;
          width: 532rpx;
          height: 337rpx;
          border-radius: 15rpx;
        }
      }
      .list {
        margin: 50rpx 45rpx 0;
        .label {
          margin-left: 20rpx;
          font-size: 32rpx;
          color: #4d4d4d;
        }
        .manage_box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-bottom: -18rpx;
          .manage {
            padding: 10rpx 0;
            margin-top: 20rpx;
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333333;
            font-size: 24rpx;
            img {
              width: 26rpx;
              height: 26rpx;
              border-radius: 50%;
              margin-right: 10rpx;
            }
          }
        }
        .int_row {
          margin-top: 20rpx;
          &.yzm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            button {
              line-height: 1;
              font-size: 30rpx;
              width: 210rpx;
              box-sizing: border-box;
              padding: 18rpx 28rpx;
              border-radius: 20rpx;
              white-space: nowrap;
              margin-left: 10rpx;
            }
            .green {
              color: #fff;
              background: linear-gradient(
                0deg,
                rgba(11, 208, 94, 1),
                rgba(11, 208, 173, 1)
              );
              box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(134, 134, 134, 0.4);
            }
            .grey {
              background-color: #cccccc;
              color: #ffffff;
              box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(134, 134, 134, 0.4);
            }
          }
          .int {
            margin-left: 0;
            box-shadow: 4rpx 6rpx 16rpx 0rpx rgba(119, 119, 119, 0.25);
            background-color: #fff;
            border-radius: 20rpx;
            height: 70rpx;
            width: auto;
            box-sizing: border-box;
            padding: 10rpx;
            border: none;
            input {
              width: 100%;
              padding-left: 15rpx;
              font-size: 30rpx;
              height: 50rpx;
              line-height: 50rpx;
              outline: none;
              border: none;
              background-color: #fff;
              color: $g6;
            }
            .input {
              width: 100%;
              padding-left: 15rpx;
              font-size: 30rpx;
              height: 50rpx;
              line-height: 50rpx;
              outline: none;
              border: none;
              background-color: #fff;
              color: $g6;
              color: #999999;
              font-weight: 500;
            }
          }
        }
      }
    }
    .fot_btn {
      margin: 72rpx auto;
      width: 498rpx;
      height: 98rpx;
      line-height: 98rpx;
      font-size: 36rpx;
      color: #fff;
      background-color: #fff;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(12, 208, 173, 0.4);
      border-radius: 49rpx;
    }
    .bottom_row {
      padding-bottom: 20rpx;
      .center {
        text-align: center;
        margin-bottom: 30rpx;
        font-size: 30rpx;
        color: #b3b3b3;
      }
    }
  }
}
</style>
